import React, { useState } from 'react'

export default function App() {
    const [text, setText] = useState("")
    const [list, setList] = useState(['aa', 'bb', 'cc'])
    const handle = (event) => {
        console.log(event);
        setText(event.target.value)
    }
    const handAdd = () => {
        setList([...list, text])
        setText("")
    }
    const handDel = (val) => {
        const newList = list.filter((item, index) => val !== index)
        setList(newList)
    }
    return (
        <div>
            <input value={text} onChange={handle} />
            <button onClick={handAdd}>添加</button>
            <ul>
                {list.map((item, index) => <li key={item}>{item} <button onClick={() => handDel(index)}>del</button></li>)}
            </ul>
            {!list.length && <div>暂无待办事项</div>}
        </div>
    )
}
